﻿@page "/MultiSelect-Dropdown/Chip-Customization"

@using Syncfusion.Blazor.DropDowns;


@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the customization of selected chip element in the MultiSelect. Type a character in the MultiSelect element or click on the element to choose one or more items from the list.</p>
</SampleDescription>
<ActionDescription>
    <p>The MultiSelect allows the user to customize the selected chip element through the <code>OnChipTag</code> event. In that event, you can set the custom classes to chip element via the event argument of the <code>SetClass</code> method.</p>
    <p>This sample illustrates how to use the favorite colors of data and set the favorite color text as custom class through <code>OnChipTag</code> event argument of the <code>SetClass</code> method.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
            <SfMultiSelect TValue="string[]" TItem="GameFields" @bind-Value="@valueObj" ID="default" Placeholder="Favorite Colors" Mode="@Syncfusion.Blazor.DropDowns.VisualMode.Box" DataSource="@ColorsData">
                <MultiSelectFieldSettings Text="Color" Value="Code"></MultiSelectFieldSettings>
                <MultiSelectEvents TValue="string[]" TItem="GameFields" OnChipTag="@OnTagging"></MultiSelectEvents>
            </SfMultiSelect>
    </div>
</div>

<style>
    .control-section .control-wrapper {
        width: 80%;
        margin: 0 auto;
        min-width: 185px;
    }

    .control_wrapper {
        width: 350px;
        margin: 0 auto;
        padding-top: 70px;
    }

    .e-bigger .control-section .control-wrapper {
        width: 100%;
    }

    .e-multi-select-wrapper .e-chips {
        opacity: 0.9;
    }

    .e-multi-select-wrapper .e-chips:hover {
        opacity: 1;
    }

    .e-multi-select-wrapper .e-chips .e-chips-close.e-icon::before,
    .e-multi-select-wrapper .e-chips .e-chipcontent,
    .e-multi-select-wrapper .e-chips .e-chipcontent:hover {
        color: #ffffff;
    }

    .e-chips.chocolate,
    .e-chips.chocolate:hover {
        background-color: #75523C;
    }

    .e-chips.darkorange,
    .e-chips.darkorange:hover {
        background-color: #FF843D;
    }

    .e-chips.darkred,
    .e-chips.darkred:hover {
        background-color: #CA3832;
    }

    .e-chips.fuchsia,
    .e-chips.fuchsia:hover {
        background-color: #D44FA3;
    }

    .e-chips.cadetblue,
    .e-chips.cadetblue:hover {
        background-color: #3B8289;
    }

    .e-chips.hotpink,
    .e-chips.hotpink:hover {
        background-color: #F23F82;
    }

    .e-chips.indigo,
    .e-chips.indigo:hover {
        background-color: #2F5D81;
    }

    .e-chips.limegreen,
    .e-chips.limegreen:hover {
        background-color: #4CD242;
    }

    .e-chips.orangered,
    .e-chips.orangered:hover {
        background-color: #FE2A00;
    }

    .e-chips.tomato,
    .e-chips.tomato:hover {
        background-color: #FF745C;
    }
</style>

@code{
    private string[] valueObj { get; set; } = { "#2F5D81", "#D44FA3", "#4CD242", "#FE2A00", "#75523C" };
    public class GameFields
    {
        public string Color { get; set; }
        public string Code { get; set; }
    }
    private List<GameFields> ColorsData = new List<GameFields>()
    {
        new GameFields(){ Color= "Chocolate", Code= "#75523C" },
        new GameFields(){ Color= "CadetBlue", Code= "#3B8289" },
        new GameFields(){ Color= "DarkOrange", Code= "#FF843D" },
        new GameFields(){ Color= "DarkRed", Code= "#CA3832"},
        new GameFields(){ Color= "Fuchsia", Code= "#D44FA3" },
        new GameFields(){ Color= "HotPink", Code= "#F23F82" },
        new GameFields(){ Color= "Indigo", Code= "#2F5D81" },
        new GameFields(){ Color= "LimeGreen", Code= "#4CD242"},
        new GameFields(){ Color= "OrangeRed", Code= "#FE2A00"},
        new GameFields(){Color= "Tomato", Code= "#FF745C"},
    };
    private void OnTagging(Syncfusion.Blazor.DropDowns.TaggingEventArgs<GameFields> args)
    {
        args.SetClass = args.ItemData.Color.ToLower();
    }
}